<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="../../common/taglib.jsp" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <%@include file="../../common/common-css.jsp" %>
    <%@include file="../../common/common-js.jsp" %>
       <%@include file="../../common/init.jsp" %>
  </head>
<head> 
  
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
  
<title>简单右键菜单</title> 
  
<style type="text/css"> 
  
    html{height:100%} 
  
    body{height:100%;margin:0;padding:0;font-size:15px;} 
    
    

.shell{margin:2px 0 0 0px;}
.shell strong{background:red;color:#eee;font-size:16px;padding:5px 20px;margin-left:10px;}
.shell span{color:#454545;font-size:12px;margin-left:10px;cursor:pointer;}
#logo img{border:none;}
#menu{position:absolute;background:#515151;color:#eee;padding:4px;z-index:1000000;margin-left: 86px;}
#menu ul,#menu li{margin:0;padding:0;list-style:none;}
#menu li a{display:block;font-size:14px;color:#fff;text-decoration:none;zoom:1}
#menu li a:hover,#menu li.focus a{background:#606060;}
#menu li{float:left;display:inline;width:78px;line-height :25px;text-align:center;margin-left:4px;}
#menu ul{border-bottom:1px dashed #666;float:left;padding:5px;width:100%;}
.menufoot{clear:both;text-align:right;padding:10px;}
.menufoot a{color:#339999;text-decoration:none;padding:5px 10px;}
.menufoot a:hover{background:#606060;color:#339999;text-decoration:none;}
  
</style> 
  
<script language="javascript" src="http://app.mapabc.com/apis?t=javascriptmap&v=3&key=b0a7db0b3a30f944a21c3682064dc70ef5b738b062f6479a5eca39725798b1ee300bd8d5de3a4ae3"></script> 
<script type="text/javascript"> 
var url="${pageContext.servletContext.contextPath }";
var mapObj; 
  
function mapInit(){ 
  
	  var opt = { 
		        level: 14//缩放级别 
		  
		    }; 
    mapObj = new MMap.Map("iCenter",opt); 
  
    addContentMenu(); 
  
} 
var resultStr="";
var postX ="";
var postY ="";
function addContentMenu(){ 
    //构造 ContextMenu 新实例 
  
    var contextMenu = new MMap.ContextMenu({ 
  
        isCustom:false, 
  
        width:180 
  
    }); 
  
    //添加菜单项 
  
    contextMenu.addItem("在此点添加服务商",function(){ 
    	var xy = postX+","+postY;
    	geocodeSearch(xy); 
        /* mapObj.zoomIn();  */
  
    },0); 
  
  /*   contextMenu.addItem("缩小",function(){ 
  
        mapObj.zoomOut(); 
  
    },1);  */
  
    //绑定右键单击事件，打开右键菜单 
  
    mapObj.bind(mapObj,"rightclick",fun5=function(e){ 
    	var post = e.lnglat.toString();
    	var postXY = post.split(",");
    	postX = postXY[0];
    	postY = postXY[1];
        contextMenu.open(mapObj,e.lnglat); 
  
    }); 
  
} 
//逆地理编码 

function geocodeSearch(xy){ 
    if(xy==""){ 
  
        return; 
  
    }else{ 
  
        var coor=xy.split(","); 
  
        var lnglatXY=new MMap.LngLat(coor[0],coor[1]); 
  
        var geo = new MMap.Geocoder(); 
  
        geo.regeocode(lnglatXY,poiToAddressSearch_CallBack); 
    } 
  
} 
  
//逆地理编码的回调函数 
  
var markers = new Array(),markerLngLat = new Array(),infos = new Array(); 
  
function poiToAddressSearch_CallBack(data){ 
  
    mapObj.clearInfoWindow(); 
  
    if(data.status=="E0"){ 
  
        for(var i=0;i<data.list.length;i++){  
            resultStr = resultStr +data.list[i].province.name+data.list[i].city.name+data.list[i].district.name+data.list[i].roadlist[0].name+
            data.list[i].poilist[0].address;
        } 
        resultStr = escape(escape(resultStr));
    	window.location.href = url+"/background/serviceProvider/addservice.html?lon="+postX+"&lat="+postY+"&address="+resultStr;
    }else if(data.status =="E1"){ 
  
         resultStr = "未查找到任何结果!建议：1.请确保所有字词拼写正确。2.尝试不同的关键字。3.尝试更宽泛的关键字。";    
         alert(resultStr);
    }else{ 
  
         resultStr= "错误信息："+data.status+"请对照API Server v2.0.0 简明提示码对照表查找错误类型"; 
         alert(resultStr);
    } 
} 
//根据城市名称设置位置
function setCity_name(name){
	$("#dishi").html(name);
	mapObj.setCity(name); 
	$("#menu").hide();
} 
</script> 
  
</head> 
  
<body onload="mapInit();">
<div class="volume">
            	<img src="${pageContext.servletContext.contextPath }/images/toleft.png" style="margin:23px 0 0 2px;_margin:23px 0 0 0px;" />
            </div>
            <div class="rightcon">
<div id="head">
  <div class="shell">
    <strong id="dishi">北京</strong><span id="menuBtn">切换城市</span>
  </div>
</div>

<div id="menu" style="display:none;overflow:hidden;height:600px;border:1px;" >
				<script>
				     
			    	 $.getJSON(url+"/city.js",function(data){
			             var $jsontip = $("#menu");
			             var strHtml = "";//存储数据的变量
			             $jsontip.empty();//清空内容
			             $.each(data,function(infoIndex,info){
			            	    strHtml += "<ul>"
								strHtml+="<li><a href='javascript:void(0)' onclick=setCity_name(this.innerHTML)>"+info["name"]+"</a></li>";
								$.each(info["cities"],function(n,value) {
									strHtml+="<li><a href='javascript:void(0)' onclick=setCity_name(this.innerHTML)>"+value+"</a></li>";
								});
			                    strHtml += "<br/></ul>"
			             })
			             $jsontip.html(strHtml);//显示处理后的数据
			         })
    	</script>
  <!-- <div class="menufoot"><a href="#">其它城市？</a></div> -->
</div>
<table width='100%'  border="0" cellpadding="0" cellspacing="2" height='100%'> 
    <tr> 
        <td  style="width:100%;height:100%;"><div id="iCenter" style="height:100%; width:100%"></div></td> 
    </tr> 
</table> 

</div>
<%-- 

<table width='100%'  border="0" cellpadding="0" cellspacing="2" height='100%'>
	<tr>
		<td  style="width:82%;height:100%;"><div id="iCenter" style="height:100%; width:100%"></div></td>
		<td style="width:18%;border-left:1px solid #666;" valign="top" >
			<div style="padding:5px 0px 0px 5px;font-size:12px;height:500px">
				<b>省级导航：</b></br>
				<a href="#" onclick="setCity_name('北京')">北京</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('天津')">天津</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('上海')">上海</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('重庆')">重庆</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('河北')">河北</a></br>
				<a href="#" onclick="setCity_name('山西')">山西</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('台湾')">台湾</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('辽宁')">辽宁</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('吉林')">吉林</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('黑龙江')">黑龙江</a></br>
				<a href="#" onclick="setCity_name('江苏')">江苏</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('浙江')">浙江</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('安徽')">安徽</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('福建')">福建</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('江西')">江西</a></br>
				<a href="#" onclick="setCity_name('山东')">山东</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('河南')">河南</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('湖北')">湖北</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('湖南')">湖南</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('广东')">广东</a></br>
				<a href="#" onclick="setCity_name('甘肃')">甘肃</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('四川')">四川</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('贵州')">贵州</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('海南')">海南</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('云南')">云南</a></br>
				<a href="#" onclick="setCity_name('青海')">青海</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('陕西')">陕西</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('广西')">广西</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('西藏')">西藏</a>&nbsp;&nbsp;
				<a href="#" onclick="setCity_name('宁夏')">宁夏</a>&nbsp;&nbsp;
					<!-- 
					<select id="pro" name ="pro" ></select>
				<select id="city" name ="city">
					<script type="text/javascript">
						(function($){
							$.initProv("#pro", "#city", "四川省", "成都市");
						})(jQuery); -->
				</script>
			</div>
		</td>
	</tr>
</table>
  </div> --%>
  
  
  
  
<script type="text/javascript">
//<![CDATA[
ldh={
    get:function (el){
        return typeof el=="string"?document.getElementById(el):el;
    },
    on:function(el,type,fn){
        el=this.get(el);
        el.attachEvent?
        el.attachEvent('on'+type,function(){fn.call(el,event)}):
        el.addEventListener(type,fn,false);
        return this
    },
    align:function (el,el2,x,y){
       var rect=this.get(el2).getBoundingClientRect(),x=x||0,y=y||0;
        el.style.top=rect.top+this.get(el2).offsetHeight+y+'px';
        el.style.left=rect.left+x+'px'
    },
   stop:function (e){
        e=e||window.event;
        e.stopPropagation&&e.stopPropagation();
        e.cancelBubble=true
    },
    onblur:function(el,fn) {
        el=this.get(el);
        this.on(el,'click',function (e){
            ldh.stop()
        }).on(document, 'click',function(e) {
            el.style.display='none';
        });
        return this
    }
};
ldh.onblur('menu').on('menuBtn','click',function (){
    var css=ldh.get('menu').style;
    if(css.display!='none') return ;
    ldh.align(ldh.get('menu'),this,-85,10);
    css.display= 'block';
    ldh.stop();
})
//]]>
</script>
</body> 
  
</html> 

